import React, { Component } from 'react';
class Solution extends Component {
    state = {
        solutions: [
            { key: 0, id: 1, name: 'Solution 1' },
            { key: 1, id: 2, name: 'Solution 2' },
            { key: 2, id: 3, name: 'Solution 3' },
        ]
    };

    handleDelete = (s) => {
        const solutions = this.state.solutions.filter(solution => solution !== s);
        this.setState({
            solutions:solutions
        });
    };
    render() { 
        if (this.state.solutions.length === 0) return <p>There are no solutions!</p>;
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名字</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.solutions.map(solution => (
                        <tr key={solution.key}>
                            <td>{solution.id}</td>
                            <td>{solution.name}</td>
                            <td><button onClick={()=>this.handleDelete(solution) } className='btn btn-danger'>删除</button></td>
                        </tr>
                    ))}
               </tbody>
            </table>
        );
    }
}
 
export default Solution;